<!-- 更新名称 -->
<template>
  <div class="updatenameBox">
    <van-field
      v-model="localName"
      rows="1"
      autosize
      label="更新昵称:"
      type="textarea"
      placeholder="请输入新昵称"
      maxlength="10"
      show-word-limit
    />
    <div class="submit">
      <van-button type="primary" block round @click="changeName"
        >提交更改</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { updateUserProfile } from "../../../api/user";
export default {
  name: "updateName",
  data() {
    return {
      localName: this.value,
    };
  },
  props: {
    // name: {
    //   type: String,
    //   required: true,
    // },
    value: {
      type: String,
      required: true,
    },
  },
  methods: {
    async changeName() {
      try {
        Toast.loading({
          forbidClick: true,
          message: "保存中..",
        });
        await updateUserProfile({ name: this.localName });
        Toast.success("更新成功");
        // this.$emit("updateName", this.localName);
        this.$emit("input", this.localName);
        //更新完成诱发重新渲染
        this.$store.commit("removeCachePage", "LayoutIndex");

        this.$emit("close");
      } catch (err) {
        if (err && err.response && err.response.status === 409)
          Toast.fail("昵称已存在");
        Toast.fail("保存失败");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  font-size: 20px;
  padding: 0;
  line-height: 15px;
}
.updatenameBox {
  height: 90%;
  background-color: rgb(245, 247, 249);

  .van-field {
    background-color: white;
    border-top: 2px solid #fff;
  }
  .submit {
    padding: 0 30px;
    margin-top: 20px;
  }
}
</style>